<template>
  <div class="p-d">
    <div class="b-f p-l p-r p-t">
      <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
    </div>
    <div class="m-t b-p-f">
      <div class="btnStyle flex-between m-b">
        <ButtonComp :buttonData="buttonData" />
      </div>
      <TableCompEle ref="multipleTable" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction" :isSelect="true" :isIndex="true"
        :isShowPage="true" :queryParams="queryParams" @handleSelectionChange="handleSelectionChange"></TableCompEle>
    </div>
    <userDialog ref="userDialog" />
  </div>
</template>

<script>
import ButtonComp from "@/views/common/buttonComp/buttonComp";
import userDialog from "./common/userDialog";
import { getPageList, deleteFunApi } from "@/api/user.js";

export default {
  components: {
    ButtonComp,
    userDialog,
  },
  data() {
    return {
      multipleSelection: [],
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      buttonData: [
        {
          kind: "button",
          label: "新建用户",
          plain: false,
          size: "mini",
          type: "primary",
          click: () => {
            let obj = {
              title: "新建用户",
              isEdit: false,
            };
            this.$refs.userDialog.show(obj);
          },
        },
        {
          kind: "button",
          label: "批量删除",
          plain: false,
          size: "mini",
          type: "danger",
          click: () => {
            if (this.multipleSelection.length == 0) {
              this.$message({
                type: "warning",
                message: "请选择要删除的数据",
              });
              return;
            }
            const ids = [];
            this.multipleSelection.forEach((items) => {
              ids.push(items.id);
            });
            this.$confirm(`确定要删除吗？`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                deleteFunApi({
                  ids,
                }).then(() => {
                  this.$refs.multipleTable.clearSelection();
                  this.getList();
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消",
                });
              });
          },
        },
      ],
      tableData: [],
      tableConfig: [
        {
          prop: "name",
          label: "账号",
        },
        {
          prop: "fullName",
          label: "用户名",
        },
        {
          prop: "roleName",
          label: "所属角色",
        },
      ],
      tableAction: {
        align: () => "center",
        width: () => String(60 * 2),
        operations: [
          {
            label: "编辑",
            isLink: true,
            type: "primary",
            method: (row) => {
              let obj = {
                title: "编辑用户",
                isEdit: true,
                row,
              };
              this.$refs.userDialog.show(obj);
            },
          },
          {
            label: "删除",
            isLink: true,
            type: "danger",
            method: (row) => {
              this.deleteFun(row);
            },
          },
        ],
      },
      queryString: {
        name: "",
        roleId: "",
      },
      searchForm: {
        changeMethod: () => this.getList(),
        formData: [
          {
            type: "Input",
            label: "用户名",
            prop: "userName",
            clearable: true,
            icon: "el-icon-search",
            placeholder: "请输入用户名",
          },
          {
            type: "Select",
            label: "用户角色",
            prop: "roleId",
            clearable: true,
            icon: "el-icon-search",
            placeholder: "请选择",
            options: [
              {
                value: 1,
                label: 22,
              },
            ],
          },
        ],
      },
      searchAction: [
        {
          label: "查找",
          type: "primary",
          handle: () => {
            this.getList();
          },
        },
        {
          label: "重置",
          type: "primary",
          plain: true,
          handle: () => {
            this.queryString = {
              userName: "",
              roleId: "",
              sort: "",
            };
            this.getList();
          },
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getPageList({
        currentPage: this.queryParams.currentPage,
        pageSize: this.queryParams.pageSize,
        queryString: this.queryString,
      }).then((res) => {
        this.queryParams.total = res.total;
        this.tableData = res.rows || [];
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteFun(row) {
      this.$confirm(`确定要删除当前用户吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteFunApi({
            ids: [row.id],
          }).then(() => {
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped></style>
